<template>
  <el-card v-if="task != null" style="margin: 6px 0">
    <div class="header" slot="header">
      <span>{{ task != null ? task.path : '' }}</span>
      <slot name="extra"></slot>
    </div>

    <div class="btns-wrapper">
      <task-operation-buttons :task="task" type="primary" v-bind="$attrs" @updated="$listeners.updated">
        <template v-slot:assignBtn="{ workflow, type, size }">
          <el-button :size="size" :type="type" icon="el-icon-edit" @click="handleAssign(workflow)">指派</el-button>
        </template>
      </task-operation-buttons>
      <slot></slot>
    </div>

    <el-row :gutter="10">
      <el-col class="detail-item" :span="8">
        <span class="label">子任务/文件:</span>
        <span class="content">{{ task.fileNum }}</span>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { checkRole, checkPermi } from '@/utils/permission'

import TaskOperationButtons from './TaskOperationButtons.vue'

export default {
  name: 'TaskInfoCard',
  components: { TaskOperationButtons },
  props: {
    task: { type: Object, required: true },
  },
}
</script>

<style lang="scss" scoped>
.detail-item {
  display: flex;
  padding: 5px;
  margin-top: 10px;

  .label {
    width: 40%;
    text-align: right;
    padding-right: 15px;
  }
  .content {
    font-weight: 400;
    width: 60%;
    text-align: left;
  }
}
</style>
